
import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.scss'
import {View, Progress} from "@tarojs/components";
import {AtButton, AtRadio} from "taro-ui";
import teamList from '../../doc/teamList'
import ansTemplateList from '../../doc/ansList'
import {useState} from "react";
import Taro from "@tarojs/taro";

export default () => {
  const questionList = teamList.map((option) => {
    return {
      id: option.id,
      question: option.question,
      options: [
        { label: `${option.options[0].key}. ${option.options[0].value}`, value: option.options[0].val },
        { label: `${option.options[1].key}. ${option.options[1].value}`, value: option.options[1].val },
      ]
    }
  });
  const [teamInd, setTeamInd] = useState(0)
  const preTeam = () => {
    setTeamInd(teamInd - 1)
  }
  const nextTeam = () => {
    setTeamInd(teamInd + 1)
  }
  const ansMap = {'I': 0, 'E': 0, 'S': 0, 'N': 0, 'T': 0, 'F': 0, 'J': 0, 'P': 0}
  const [ansList] = useState<string[]>([])

  // 答案
  const [ansStr, setAnsStr] = useState('')

  const [teamShowFlag, setTeamShowFlag] = useState(false)

  // 生成答案
  const getAnsStr = () => {
    let tpAnsKey = ''
    tpAnsKey += (ansMap['I'] > ansMap['E']) ? 'I' : 'E'
    tpAnsKey += (ansMap['S'] > ansMap['N']) ? 'S' : 'N'
    tpAnsKey += (ansMap['T'] > ansMap['F']) ? 'T' : 'F'
    tpAnsKey += (ansMap['J'] > ansMap['P']) ? 'J' : 'P'
    console.log('ansTemplateList[tpAnsKey]', ansTemplateList[tpAnsKey])
    console.log('ansTemplateList', ansTemplateList)
    console.log('tpAnsKey', tpAnsKey)
    if(!ansTemplateList[tpAnsKey]){
      setAnsStr('没有找到匹配的答案，请重新测试！ ！！')
      console.log('没有找到匹配的答案，请重新测试！ ！！')
      return
    }
    setAnsStr(ansTemplateList[tpAnsKey])
  }

  const selVal = useState('')
  return (
    <View className='doQuestionPage'>
      {!teamShowFlag &&
        <View className='doQuestionBox'>
          <View className='teamBox'>
            <View className='teamText'>
              {`${questionList[teamInd].id}. ${questionList[teamInd].question}`}
            </View>
            <AtRadio
              options={questionList[teamInd].options}
              onClick={(val) => {
                ansList[teamInd] = val
                if (teamInd < questionList.length - 1) nextTeam()
              }}
             value={selVal}/>
          </View>
          <View className='marginBotm20'>
            {
              (teamInd) &&
              <AtButton type='primary' circle className='preTeam'
                        onClick={preTeam}>
                上一题
              </AtButton>
            }
          </View>
          {
            (teamInd === questionList.length - 1) &&
            <AtButton type='primary' circle className='marginBotm20 showAns' onClick={() => {
              // 计算答案
              for (let ansMapKey in ansMap) {
                ansMap[ansMapKey] = 0
              }
              ansList.forEach(it => {
                ansMap[it]++
              })
              getAnsStr()
              // 显示答案
              setTeamShowFlag(true)
            }}>
              查看答案
            </AtButton>
          }
          {
            (teamInd < questionList.length - 1) &&
            <AtButton type='primary' circle className='marginBotm20 nextTeam'
                      onClick={nextTeam}>
              下一题
            </AtButton>
          }
          {/* {
            JSON.stringify(ansMap)
          } */}
        </View>
      }
      {/* 展示答案*/}
      {teamShowFlag &&
       <View className='teamResult'>
         <View className='topText'>
            {ansStr}
         </View>
         <AtButton type='primary' circle className='indexBtn' onClick={() => {
           Taro.navigateTo({
             url: '/pages/doQuestion/index'
           });
         }}>
           返回
         </AtButton>
         {/*<Image className='bgImg' src={indexBgImg}/>*/}
       </View>
      }
      <Progress percent={(teamInd + 1.0) / questionList.length  * 100} showInfo strokeWidth={2} />
    </View>
  )
}
